<template>
  <!-- <LabelPrefixWraper
    :class="['t-discount']"
    :label="mappingProps.label"
    :hideLabel="mappingProps.hideLabel"
    :labelPosition="mappingProps.labelPosition"
    :helpConf="mappingProps.helpConf"
    :helpTooltip="mappingProps.helpTooltip"
    :helpPlacement="mappingProps.helpPlacement"
    :helpMore="mappingProps.helpMore"
    :helpMorePopup="mappingProps.helpMorePopup"
    :helpMoreLink="mappingProps.helpMoreLink"
    :helpMoreLinkHrefStatic="mappingProps.helpMoreLinkHrefStatic"
    :helpMoreLinkHrefExp="mappingProps.helpMoreLinkHrefExp"
  >
    <div ref="ref_discount"> </div>
  </LabelPrefixWraper> -->
  <div class="discountAndCurrency"  :class="mappingProps.class" :style="mappingProps.style" v-show="mappingProps.visible" ref="discountDom">
    <t-input
       v-bind="(()=>{
      
        let props = {
         ...mappingProps
        };
        delete props.style;
        delete props.class;
        return props;
      })()"
      v-model="mappingProps.modelValue"
      :rules="mappingProps.rules.concat(rules)"
      borderless
      ref="input"
      @focus="focus"
    >
      <template v-slot:default>
        <div ref="ref_discount" style="width: 100%; margin-right: 2px"> </div>
      </template>
    </t-input>
  </div>
</template>

<script>
/**
 * @数据源
 * @标题
 * @placeholder
 * @hintmode
 * @defaultvalue
 * @readlony
 * @visible
 * @Space 输入框间距
 * @isTextArea 是否单行文本
 *
 */
import useMappingProps from 't/common/hooks/useMappingProps';
import { fixNameSpace } from 't/common/utils';
import { defineComponent, onMounted, ref, watch } from 'vue';
import LabelPrefixWraper from '../../basic/label-prefix-wraper';
// import discount from './discount.vue';
import TField from 't/basic/field';
import TInput from 't/basic/input';
import { Discount as DiscountComponent } from './discountComponent';
import './index.scss';

export default defineComponent({
  name: fixNameSpace('discount'),
  components: { LabelPrefixWraper, TInput, TField },
  props: {
    // ...commonProps,
    ...LabelPrefixWraper.props,
    placeholder: String, //占位内容
    showHint: Boolean, //悬停文字
    hintMode: String, //文字内容(自定义、同位内容)
    hintMsg: String, //自定义文字
    defaultValue: String, //默认值
    tabIndex: Number,

    readonly: {
      type: Boolean,
      default() {
        return false;
      },
    },
    modelValue: {
      type: String,
      default() {
        return '';
      },
    },
    required: {
      type: Boolean,
      default() {
        return false;
      },
    },
    requiredMessage: {
      type: String,
      default() {
        return '必填提示';
      },
    },
    requireMultRule: {
      type: String,
      default() {
        return 'Master';
      },
    },
    maxLength: {
      type: Number,
      default() {
        return 0;
      },
    },
    maxLengthMessage: {
      type: String,
      default() {
        return '';
      },
    },
    localInfoList: {
      type: Array,
      default() {
        return [];
      },
    },
    rules: {
      type: Array,
      default: [],
    },
    visible: {
      type: Boolean,
      default() {
        return true;
      },
    },
    style: {
      type: String,
      default() {
        return '';
      },
    },
     class: {
      type: String,
      default() {
        return '';
      },
    },
  },
  emits: ['update:modelValue',focus, 'change'],
  setup(props, { attrs, emit, expose, slots }) {
    const [mappingProps, mappingExpose] = useMappingProps(props);
    const ref_discount = ref(null);
    const discountInstance = ref(null);
    const input = ref(null);
    const discountDom = ref(null)
    const getLangList = () => {
      console.log('mappingProps.localInfoList', mappingProps.localInfoList);
      return mappingProps.localInfoList;
      //todo 修改成走接口
    };
      function focus() {
      emit('focus');
    }
    const hintPlaceholder = () => {
      const msg = ref('');
      if (mappingProps.showHint) {
        if (mappingProps.hintMode == 'custom') {
          msg.value = mappingProps.hintMsg;
        } else {
          msg.value = mappingProps.placeholder;
        }
      }
      return msg;
    }; //悬停文字相关
    const proxy_value = ref('');
    watch(
      () => proxy_value.value,
      (newVal, oldVal) => {
        discountInstance.value.element.querySelector(
          '.TeldDiscountComponent_value',
        ).value = newVal;
      },
    );
    // const lang = ref(
    //   TFF.common.storage.Cookie.read('teld_locale') ||
    //     TFF.common.storage.Cookie.read('wrp_systemLocale') ||
    //     'zh-CN',
    // );
    const language = ref('');
    if (window.TFF) {
      language.value =
        TFF.common.storage.Cookie.read('teld_locale') ||
        TFF.common.storage.Cookie.read('wrp_systemLocale') ||
        'zh-CN';
    } else {
      language.value = 'zh-CN';
    }
    const lang = ref(language);

    const value = ref(mappingProps.modelValue);
    const dataChange = data => {
      emit('update:modelValue', data);
      emit('change', data);

    };
    const setValue = val => {
      value.value = val;
      discountInstance.value&&discountInstance.value.setValue(val);
    };
    const validateExpose = () => {
      return input.value?.validate();
    }
    expose({
      ...mappingExpose,
      setValue,
      Validate:validateExpose,
      validate: validateExpose,
    });
    const validateByComponent = val => {
      debugger;
      console.log('执行了validateByComponent', val);
      if (val === '' && mappingProps.required) {
        return mappingProps.requiredMessage;
      }
      if (val < 0 || val > 10) {
        let verification = Funcs.GetTerms(
          'Schema.Controls.Discount.verification.scop',
          '校验失败，折扣数据应该为${message}的数字',
        );
        verification = verification.replace(
          /\${message}/gi,
          lang.value.indexOf('zh-CN') == 0 ? '0-10' : '0-100',
        );
        return verification;
      } else {
        return true;
      }
    };
    const validate = () => {
      if (value.value === '' && !mappingProps.required) {
        return true;
      }
      if (value.value < 0 || value.value > 10) {
        let verification = Funcs.GetTerms(
          'Schema.Controls.Discount.verification.scop',
          '校验失败，折扣数据应该为${message}的数字',
        );
        verification = verification.replace(
          /\${message}/gi,
          lang.value.indexOf('zh-CN') == 0 ? '0-10' : '0-100',
        );
        return verification;
      }

      // //非空
      // if (mappingProps.required) {
      //   if (value.value === '') {
      //     return mappingProps.requiredMessage;
      //   }
      // }
      return true;
    };
    const rules = ref([validateByComponent]);
    onMounted(() => {
      discountInstance.value = new DiscountComponent(ref_discount.value, {
        ...mappingProps,
        title: hintPlaceholder(),
        type: 'discount',
        direction: mappingProps.direction,
        readonly: mappingProps.readonly,
        tabindex: mappingProps.tabIndex ? mappingProps.tabIndex : 0,
        dataChange: dataChange,
        lang: lang.value,
        validate: () => { },
        value: value.value,
        max: 0,
        min:0
      });
      discountDom.value.tabIndex = -1
    });
    watch(
      () => mappingProps.modelValue,
      () => {
        (value.value = mappingProps.modelValue);
       setValue(mappingProps.modelValue);
      },
      { immediate: true },
    );
    watch(
      () => mappingProps.readonly,
      () => {
        discountInstance.value &&
          discountInstance.value.setReadOnly(mappingProps.readonly);
      },
      { immediate: true },
    );
    watch(
      () => mappingProps.placeholder,
      () => {
        discountInstance.value &&
          discountInstance.value.setPlaceholder(mappingProps.placeholder);
      },
      { immediate: true },
    );
    return {
      proxy_value,
      attrs,
      // styles,
      mappingProps,
      ref_discount,
      discountInstance,
      rules,
      discountDom,
      focus,
      input
    };
  },
});
</script>

<style lang="scss" scoped></style>
